<template>
    <div :class="`bigScreen ${screenStatus ? 'full' : ''}`">
        <el-card class="main-card">
            <div class="flex-between">
                <div style="width: calc(100% - 550px); margin-right: 30px">
                    <el-card class="chart-card top-card" shadow="never">
                        <div slot="header" class="card-header">设备状态</div>
                        <!-- <div class="date-type">
                            <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getlineData">
                                <el-radio-button label="1">日</el-radio-button>
                                <el-radio-button label="2">月</el-radio-button>
                                <el-radio-button label="3">年</el-radio-button>
                            </el-radio-group>
                        </div> -->

                        <div class="flex-between">
                            <div ref="pieChart" style="width: 400px; height: 265px"></div>
                            <div ref="pietable" style="width: 700px; height: 265px">
                                <el-table v-loading="loading" :data="deviceList" :border="false">
                                    <el-table-column label=" " align="center" header-align="center" prop="index" width="100">
                                        <template v-slot="{ row }">
                                            <i class="table-color" :style="`background-color:${colorList[row.index]};`"></i>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="设备状态" align="left" header-align="left" prop="status" min-width="120" />
                                    <el-table-column label="设备数量" align="left" header-align="left" prop="num" min-width="120" />
                                    <el-table-column label="运行情况" align="left" header-align="left" prop="desc" min-width="120" />
                                </el-table>
                            </div>
                        </div>
                    </el-card>
                </div>
                <div style="width: 520px">
                    <el-card class="chart-card top-card" shadow="never">
                        <div slot="header" class="card-header">常用功能</div>
                        <div class="flex-between public-use">
                            <div class="use-option" v-for="(item, index) in useList" :key="index">
                                <el-image style="width: 40px; height: 40px" :src="require(`@/assets/images/bigScreen/use-icon0${index + 1}.png`)"></el-image>
                                <div class="use-label">{{ item }}</div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </el-card>
        <el-card class="chart-card center-list" shadow="never">
            <el-tabs v-model="activeStatus">
                <el-tab-pane label="代办事项统计" name="all"></el-tab-pane>
                <el-tab-pane label="我的代办事项" name="my"></el-tab-pane>
            </el-tabs>
            <div class="flex-between agency-matter">
                <div class="agency-option" v-for="(item, index) in agencyList" :key="index" :style="(index + 1) % 6 == 0 ? ' margin:0;' : ''">
                    <div class="agency-label">{{ item.label }}</div>
                    <div class="agency-num">{{ item.num }}</div>
                </div>
            </div>
        </el-card>
        <el-card class="chart-card center-card" shadow="never">
            <div slot="header" class="card-header">今日保修</div>
            <div style="display: flex">
                <div ref="repairChart" style="width: 400px; height: 265px"></div>
                <div class="flex-between" style="width: 70px; margin: 20px 100px; flex-direction: column">
                    <div class="flex-between" v-for="(item, index) in repairList" :key="index">
                        <i class="table-color" :style="`background-color:${colorList[index]};margin-right:8px;`"></i>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <div class="flex-between repair-order" style="width: 1008px; height: 265px">
                    <div class="repair-option" v-for="(item, index) in repairOrderList" :key="index" :style="index < 4 ? ' margin-bottom:20px;' : ''">
                        <el-image style="width: 48px; height: 48px; margin-right: 8px" :src="require(`@/assets/images/bigScreen/status-icon0${index + 1}.png`)"></el-image>
                        <div class="repair-content">
                            <div class="repair-label">{{ item.label }}</div>
                            <div class="repair-num">{{ item.num }}</div>
                        </div>
                    </div>
                    <div class="repair-option"></div>
                </div>
            </div>
        </el-card>
        <el-card class="chart-card bottom-chart" shadow="never">
            <div slot="header" class="card-header">设备分布</div>
            <div class="date-type">
                <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getlineData">
                    <el-radio-button label="1">日</el-radio-button>
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">年</el-radio-button>
                </el-radio-group>
            </div>
            <div ref="deviceChart" style="width: 100%; height: 306px"></div>
        </el-card>
        <el-card class="main-card">
            <div class="flex-between" style="height: 370px">
                <el-card class="chart-card bottom-chart" style="width: calc(50% - 10px)" shadow="never">
                    <div class="date-type">
                        <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getlineData">
                            <el-radio-button label="1">日</el-radio-button>
                            <el-radio-button label="2">月</el-radio-button>
                            <el-radio-button label="3">年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div slot="header" class="card-header">面积图示意</div>
                    <div ref="lineChart" style="width: 100%; height: 306px"></div>
                </el-card>
                <el-card class="chart-card bottom-chart" style="width: calc(50% - 10px)" shadow="never">
                    <div class="date-type">
                        <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getlineData">
                            <el-radio-button label="1">日</el-radio-button>
                            <el-radio-button label="2">月</el-radio-button>
                            <el-radio-button label="3">年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div slot="header" class="card-header">单柱图示意</div>
                    <div ref="barChart" style="width: 100%; height: 306px"></div>
                </el-card>
            </div>
        </el-card>
    </div>
</template>

<script>
// import { getOperationsituation } from '../../maintain/api/maintain/device';
import * as echarts from 'echarts';
export default {
    name: 'bigScreen',
    data() {
        return {
            colorList: ['#165DFF', '#14C9C9', '#F7BA1E', '#A3D12E', '#FA9134', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            screenStatus: false,
            lineType: '1',
            barType: '1',
            lineResouce: {},
            barResouce: {},
            pie_chart: null,
            repair_chart: null,
            device_chart: null,
            line_chart: null,
            bar_chart: null,
            deviceList: [
                {
                    index: 0,
                    status: '正常运行',
                    num: '123',
                    desc: '35%',
                },
                {
                    index: 1,
                    status: '故障中',
                    num: '50',
                    desc: '35%',
                },
                {
                    index: 2,
                    status: '报废',
                    num: '30',
                    desc: '35%',
                },
                {
                    index: 3,
                    status: '停用',
                    num: '40',
                    desc: '35%',
                },
                {
                    index: 4,
                    status: '维修',
                    num: '20',
                    desc: '35%',
                },
            ],
            useList: ['故障报修', '设备维修', '设备保养', '新增设备', '新增备件', '备件领用', '备件采购', '备件入库', '备件出库'],
            activeStatus: 'all',
            agencyList: [
                { label: '维修工单', num: '5' },
                { label: '故障报修审核', num: '5' },
                { label: '采购审核', num: '5' },
                { label: '维修验收', num: '5' },
                { label: '保养计划审核', num: '5' },
                { label: '保养任务', num: '5' },
                { label: '保养验证', num: '5' },
                { label: '巡检计划审核 ', num: '5' },
                { label: '巡检任务', num: '5' },
                { label: '点检计划审核 ', num: '5' },
                { label: '点检任务', num: '5' },
                { label: '领用审核', num: '5' },
            ],
            repairList: [
                {
                    name: '未派工',
                    value: 2,
                },
                {
                    name: '待接单',
                    value: 2,
                },
                {
                    name: '待执行',
                    value: 4,
                },
                {
                    name: '待验证',
                    value: 4,
                },
                {
                    name: '待审核',
                    value: 2,
                },
            ],
            repairOrderList: [
                { label: '工单总数', num: '5' },
                { label: '未派工', num: '5' },
                { label: '待接单', num: '5' },
                { label: '待执行', num: '5' },
                { label: '维修中', num: '5' },
                { label: '待验证 ', num: '5' },
                { label: '已完成', num: '5' },
            ],
        };
    },
    methods: {
        drawPie() {
            // 基于准备好的dom，初始化echarts实例
            this.pie_chart = echarts.init(this.$refs.pieChart);
            var option;
            option = {
                title: {
                    text: '1233',
                    textStyle: {
                        fontSize: 30,
                        lineHeight: 32,
                        fontWeight: 500,
                    },
                    subtext: '今日销售总额',
                    subtextStyle: {
                        fontSize: 16,
                    },
                    left: 'center',
                    top: '35%',
                },
                color: this.colorList,
                grid: {
                    left: '20%',
                },
                tooltip: {
                    show: false,
                },
                legend: {
                    show: false,
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['70%', '90%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },
                        emphasis: {
                            disabled: true,
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' },
                        ],
                    },
                ],
            };
            this.pie_chart.setOption(option);
        },
        drawRepair() {
            // 基于准备好的dom，初始化echarts实例
            this.repair_chart = echarts.init(this.$refs.repairChart);
            var option;
            option = {
                title: {
                    text: '1233',
                    textStyle: {
                        fontSize: 30,
                        lineHeight: 32,
                        fontWeight: 500,
                    },
                    subtext: '今日销售总额 2',
                    subtextStyle: {
                        fontSize: 16,
                    },
                    left: 'center',
                    top: '35%',
                },
                color: this.colorList,
                grid: {
                    left: '20%',
                },
                tooltip: {
                    show: false,
                },
                legend: {
                    show: false,
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['70%', '90%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },
                        emphasis: {
                            disabled: true,
                        },
                        data: this.repairList,
                    },
                ],
            };
            this.repair_chart.setOption(option);
        },
        drawDevice() {
            this.device_chart = echarts.init(this.$refs.deviceChart);
            var option;
            // 基于准备好的dom，初始化echarts实例
            let xAxis = [];

            if (this.barType == 1) {
                xAxis = ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'];
            } else if (this.barType == 2) {
                let lastDate = new Date(new Date().setDate(1));
                let lastTime = lastDate.getTime();
                let nextTime = new Date(lastDate.setMonth(lastDate.getMonth() + 1)).getTime();
                let num = (nextTime - lastTime) % 86400000;
                for (let i = 1; i < num; num++) {
                    xAxis.push(i + '日');
                }
            } else {
                xAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            }
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: '100',
                    right: '40',
                    bottom: '40',
                    top: '10%',
                    // containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisLabel: {
                        fontSize: 12,
                        color: '#a8abb2',
                        lineHeight: 20,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    min: 0,
                    max: 10000,
                },
                series: [
                    {
                        name: '正常',
                        type: 'bar',
                        color: '#C2D3FA',
                        data: [1200, 6000, 2000, 4000, 5000, 6000, 5000, 5000],
                        // itemStyle: {
                        //     color: '#1890ff',
                        // },
                    },
                ],
            };
            this.device_chart.setOption(option);
        },
        drawLine() {
            this.line_chart = echarts.init(this.$refs.lineChart);
            var option;
            // 基于准备好的dom，初始化echarts实例
            let xAxis = [];
            if (this.barType == 1) {
                xAxis = ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'];
            } else if (this.barType == 2) {
                let lastDate = new Date(new Date().setDate(1));
                let lastTime = lastDate.getTime();
                let nextTime = new Date(lastDate.setMonth(lastDate.getMonth() + 1)).getTime();
                let num = (nextTime - lastTime) % 86400000;
                for (let i = 1; i < num; num++) {
                    xAxis.push(i + '日');
                }
            } else {
                xAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            }
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: '100',
                    right: '40',
                    bottom: '40',
                    top: '10%',
                    // containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisLabel: {
                        fontSize: 12,
                        color: '#a8abb2',
                        lineHeight: 20,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    min: 0,
                    max: 10000,
                },
                series: [
                    {
                        name: '正常',
                        type: 'line',
                        color: 'rgba(0, 201, 159, 0.4)',
                        data: [1200, 6000, 2000, 4000, 5000, 6000, 5000, 5000],
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 201, 159, 0.4)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 201, 159, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                        // itemStyle: {
                        //     color: '#1890ff',
                        // },
                    },
                ],
            };
            this.line_chart.setOption(option);
        },
        drawBar() {
            this.bar_chart = echarts.init(this.$refs.barChart);
            var option;
            // 基于准备好的dom，初始化echarts实例
            let xAxis = [];

            if (this.barType == 1) {
                xAxis = ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'];
            } else if (this.barType == 2) {
                let lastDate = new Date(new Date().setDate(1));
                let lastTime = lastDate.getTime();
                let nextTime = new Date(lastDate.setMonth(lastDate.getMonth() + 1)).getTime();
                let num = (nextTime - lastTime) % 86400000;
                for (let i = 1; i < num; num++) {
                    xAxis.push(i + '日');
                }
            } else {
                xAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            }
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: '100',
                    right: '40',
                    bottom: '40',
                    top: '10%',
                    // containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisLabel: {
                        fontSize: 12,
                        color: '#a8abb2',
                        lineHeight: 20,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    min: 0,
                    max: 10000,
                },
                series: [
                    {
                        name: '正常',
                        type: 'bar',
                        color: '#F58080',
                        data: [1200, 6000, 2000, 4000, 5000, 6000, 5000, 5000],
                        barWidth: 8,
                        // itemStyle: {
                        //     color: '#1890ff',
                        // },
                    },
                ],
            };
            this.bar_chart.setOption(option);
        },
        getPieData() {
            this.drawPie();
        },
        getRepairData() {
            this.drawRepair();
        },
        getDeviceData() {
            this.drawDevice();
        },
        getLineData() {
            this.drawLine();
        },
        getBarData() {
            this.drawBar();
        },
        resize() {
            let scrollView = document.querySelector('.app-main'); //app-main的宽高
            let baseWidth = 1720; //设计稿宽度
            var zoomValue = scrollView.clientWidth / baseWidth; //缩放比例计算
            scrollView.style.transform = `scale(${zoomValue})`;
            scrollView.style.transformOrigin = `0,0`;
            window.onresize = () => {
                var zoomValue = scrollView.clientWidth / baseWidth; //缩放比例计算
                scrollView.style.transform = `scale(${zoomValue})`;
            };
        },
    },
    mounted() {
        // this.getlineData();
        this.getPieData();
        this.getRepairData();
        this.drawDevice();
        this.getLineData();
        this.getBarData();
        // this.resize();
        setInterval(() => {
            this.$resize();
            if (this.bar_chart) {
                this.bar_chart.resize();
            }
            if (this.pie_chart) {
                this.pie_chart.resize();
            }
            if (this.repair_chart) {
                this.repair_chart.resize();
            }
            if (this.device_chart) {
                this.device_chart.resize();
            }
            if (this.line_chart) {
                this.line_chart.resize();
            }
        }, 500);
    },
};
</script>

<style scoped>
@import './index.scss';
</style>
